<template>
  <div class="container">
    <p>新:{{ outterNewId }}</p>
  </div>
</template>

<script setup> 
import {ref, onMounted, watch} from 'vue'
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'

const route = useRoute()
const outterNewId = ref('')
const outterOldId = ref('')

onMounted(() => {
  outterNewId.value = route.params.id
  initThree()
})

watch(() => route.params.id, (newId, oldId) => {
  console.log('newId', newId)
  console.log('oldId', oldId)
  outterNewId.value = newId
  outterOldId.value = oldId
})

function initThree() {
  console.log('akljsdhf')
}


</script>

<style scoped>
.container {  
  width: 1200px;  
  height: 600px; /* 设置你想要的容器高度 */  
} 
</style>